<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>vue中样式-class</title>
	<script src="js/vue.js"></script>
	<style>
		.red{
			color:red;
		}
		.thin{
			font-weight: 200;
		}
		.italic{
			font-style:italic;
		}
		.active{
			letter-spacing: 0.5em;
		}
	</style>
</head>
<body>
	<div id="app">
		<!--<h1 class="red thin">科睿特软件集团股份有限公式H1</h1>-->
		
		<!--第一种使用方式，直接传递一个数组，注意：这里的class需要使用v-bind做数据绑定-->
		<!--<h1 :class="['thin','italic']">科睿特软件集团股份有限公式H1</h1>-->
		
		<!--在数组中使用三元表达式-->
		<!--<h1 :class="['thin', 'italic', flag?'active':'']">科睿特软件集团股份有限公式H1</h1>-->
		
		<!--在数组中使用对象来代替三元表达式，提高代码可读性-->
		<!--<h1 :class="['thin', 'italic', {'active':flag}]">科睿特软件集团股份有限公司H1</h1>-->
		
		<!--在为class使用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号，可不带引号，属性的值是一个标识符-->
		<h1 :class="classObj">科睿特软件集团股份有限公司H1</h1>
	
	</div>
	
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				flag: false,
				classObj: {red:true, thin:true, italic:false, active:false},
			},
			methods: {
				
			}
		});
	</script>
</body>
</html>
